<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单视频会议</title>
</head>
<body>
    <!-- 功能按钮区域 -->
    <div>
        <button id="createRoom">创建房间</button>
        <button id="joinRoom">加入房间</button>
        <button id="toggleMute">静音/解除静音</button>
        <button id="toggleCamera">开启/关闭摄像头</button>
    </div>

    <!-- 成员列表区域 -->
    <div>
        <h2>房间成员</h2>
        <ul id="memberList">
            <!-- 成员数据将通过JavaScript动态生成 -->
        </ul>
    </div>

    <script>
        // 固定的成员数据
        const members = [
            { id: 1, name: "张三", isMuted: false, hasCamera: true },
            { id: 2, name: "李四", isMuted: true, hasCamera: false },
            { id: 3, name: "王五", isMuted: false, hasCamera: true },
            { id: 4, name: "赵六", isMuted: true, hasCamera: true }
        ];

        // 渲染成员列表
        function renderMemberList() {
            const memberList = document.getElementById('memberList');
            memberList.innerHTML = '';

            members.forEach(member => {
                const li = document.createElement('li');
                li.innerHTML = `${member.name}
                    (${member.isMuted ? '已静音' : '未静音'})
                    (${member.hasCamera ? '摄像头开启' : '摄像头关闭'})`;
                memberList.appendChild(li);
            });
        }

        // 按钮点击事件处理
        document.getElementById('createRoom').addEventListener('click', function() {
            let token = ipcRenderer.sendSync(ChannelConstant.GET_TOKEN);
            let config = readJsonFromFile(path.join(app.getAppPath(), './config.json'));
            $.ajax({
                url: `${config.meetingPattern == 'sfu' ? config.sfuServer : config.nodeRoomServer}/createValidRoomId`,
                headers: {
                    'token': ''
                },
                type: 'post',
                timeout: 1000,
                success: (result) => {
                    ipcRenderer.send(ChannelConstant.CREATE_MEETING_WINDOW, result.roomId, "CREATE");
                    layui.layer.closeAll();
                }, error: (err) => {
                    console.log(err);
                    alert('请求错误');
                }
            });
        });

        document.getElementById('joinRoom').addEventListener('click', function() {
            alert('加入房间功能');
        });

        document.getElementById('toggleMute').addEventListener('click', function() {
            // 切换第一个成员的静音状态作为示例
            members[0].isMuted = !members[0].isMuted;
            renderMemberList();
        });

        document.getElementById('toggleCamera').addEventListener('click', function() {
            // 切换第一个成员的摄像头状态作为示例
            members[0].hasCamera = !members[0].hasCamera;
            renderMemberList();
        });

        // 初始化页面
        renderMemberList();
    </script>
</body>
</html>
